<script setup lang="ts">
const router = useRouter()
</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header />
    <!-- 自适应背景图 -->
    <img 
      src="/assets/images/xuanzeye.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <!-- 祈福 -->
    <div class="absolute top-[5%] right-[32%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('qifu')"
      >
        <img 
          src="/assets/images/qifu.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
    <!-- 上香 -->
    <div class="absolute top-[22%] left-[10%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('shangxiang')"
      >
        <img 
          src="/assets/images/shangxiang.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
    <!-- 求符 -->
    <div class="absolute top-[25%] right-[8%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('qiufu')"
      >
        <img 
          src="/assets/images/qiufu.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
    <!-- 运势 -->
    <div class="absolute top-[40%] left-[30%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('yunshi')"
      >
        <img 
          src="/assets/images/yunshi.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
    <!-- 风水 -->
    <div class="absolute bottom-[30%] left-[12%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('fengshui')"
      >
        <img 
          src="/assets/images/fengshui.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
    <!-- 取名 -->
    <div class="absolute bottom-[35%] right-[10%] flex justify-center z-10">
      <button 
        class="p-2 transition-transform hover:scale-105 active:scale-95 animate-scale"
        @click="router.push('quming')"
      >
        <img 
          src="/assets/images/quming.png" 
          alt=""
          class="w-[100px] md:w-[140px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
        />
      </button>
    </div>
  </div>
</template>
<style scoped>
  @keyframes scaleAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2); /* 放大到 120% */
    }
    100% {
      transform: scale(1); /* 恢复到原始大小 */
    }
  }

  .animate-scale {
    animation: scaleAnimation 2s ease-in-out infinite; /* 动画时长为 2秒，循环播放 */
  }
</style>